<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>T1_审核商机授权</title>
    <link rel="stylesheet" href="../elementui-2.15.6/element-icons.ttf">
    <link rel="stylesheet" href="../elementui-2.15.6/element-icons.woff">
    <link rel="stylesheet" href="../elementui-2.15.6/icon.css">
    <link rel="stylesheet" href="../elementui-2.15.6/elmentui.css">
    <link rel="stylesheet" href="../common.css">
    <link rel="stylesheet" href="./scss/index.css">
    <script src='../vue-2.6.12.js'></script>
    <script src='../elementui-2.15.6/elementui.js'></script>
</head>

<body>
    <div class="zl-review-business-auth" id="zl-review-business-auth-box-t1">
        <div class="zl-review-business-auth-main" v-show="!showDetail && !showAuth">
            <div class="zl-review-business-auth-search">
                <div class="left-btn">
                    <!-- <el-button type="primary" size="small" icon="el-icon-position">商机授权
                    </el-button> -->
                    <el-button type="primary" size="small" icon="el-icon-upload2" @click="uploadAuthBook">上传电子授权书
                    </el-button>
                </div>
                <div class="right-btn">
                    <el-button type="primary" size="small" icon="el-icon-s-claim" @click="batchReview">批量审核
                    </el-button>
                    <el-button type="danger" size="small" icon="el-icon-delete" @click="deleteData">删除</el-button>
                    <el-button type="warning" size="small" icon="el-icon-refresh-left" @click="refresh">刷新</el-button>
                </div>
            </div>
            <div class="zl-review-business-auth-table">
                <el-table :data="tableData" style="width: 200%" ref="multipleTable" @selection-change="selectionChange"
                    @cell-click="handleCellClick">
                    <el-table-column type="selection" width="55">
                    </el-table-column>
                    <template v-for="(item, index) in tableHeader">
                        <el-table-column :prop="item.key" :label="item.label" v-if="item.key !== 'op'" :key="index"
                            :min-width="item.minWidth" show-overflow-tooltip>
                            <template slot-scope="scope">
                                <template v-if="item.isEdit">
                                    <el-select v-if="scope.row.isEdit" size="small" v-model="scope.row.zt"
                                        @change="(value) => handleInputBlur(scope,value)" placeholder="请选择">
                                        <el-option label="待审核" value="待审核"></el-option>
                                        <el-option label="已通过" value="已通过"></el-option>
                                    </el-select>
                                    <!-- <el-input  size="small"
                                        @keyup.native.enter="handleInputBlur(scope)" @blur="handleInputBlur(scope)"
                                        v-model="scope.row.zt"></el-input> -->
                                    <span v-else>
                                        <el-tag size="small" :type="scope.row.zt === '已通过' ? 'success': 'warning'">{{scope.row.zt}}</el-tag>
                                    </span>
                                </template>
                                <template v-else>
                                    <span v-if="item.slot">
                                        <el-tag size="small" :type="scope.row[item.key] === 1 ? 'success': 'warning'">{{scope.row[item.key] === 1 ? '已报备': '未报备'}}</el-tag>
                                    </span>
                                    <span v-else-if="item.isClick" @click="openDetailDialog(scope.row)"
                                        style="color: #409EFF;cursor: pointer;">
                                        {{scope.row[item.key]}}
                                    </span>
                                    <span v-else>{{scope.row[item.key]}}</span>
                                </template>
                            </template>
                        </el-table-column>
                        <el-table-column v-else label="操作" align="center" width="80">
                            <template slot-scope="scope">
                                <el-button type="text" size="small" @click="openDetailDialog(scope.row)">查看</el-button>
                            </template>
                        </el-table-column>
                    </template>
                </el-table>
                <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
                    :current-page="pageData.currentPage" :page-sizes="[10, 20, 30, 40, 50]"
                    :page-size="pageData.pageSize" layout="total, prev, pager, next, sizes" :total="pageData.total">
                </el-pagination>
            </div>
        </div>
        <!-- 查看详情弹框 -->
        <div class="zl-review-business-auth-addOrEditBox" v-show="showDetail">
            <el-card class="box-card">
                <div slot="header" class="clearfix">
                    <span>授权详情</span>
                    <el-button style="float: right; padding: 3px 0;font-size:20px" type="text" icon="el-icon-close"
                        @click="closed(2)"></el-button>
                </div>
                <div class="box-card-form">
                    <el-descriptions title="" size="small" direction="vertical" :column="2" border>
                        <template v-for="(item, index) in detailItemList">
                            <template v-if="item.label.indexOf('生效商机名称') > -1">
                                <el-descriptions-item :label="item.label" :key="index" v-if="authForm.bbzt === 1">
                                    {{authForm[item.key]}}</el-descriptions-item>
                            </template>
                            <el-descriptions-item :label="item.label" :key="index" v-else>
                                {{authForm[item.key]}}</el-descriptions-item>
                        </template>
                    </el-descriptions>
                        
                    <div class="goods-list">
                        <div class="goods-list-title"><span class="title-spot">
                                <em class="spot"></em>产品
                            </span></div>
                        <div class="goods-list-table">
                            <el-table :data="goodsData" border style="width: 100%">
                                <el-table-column prop="goodsname" label="产品" show-overflow-tooltip width="400">
                                </el-table-column>
                                <el-table-column prop="goodsCode" label="料号" show-overflow-tooltip></el-table-column>
                                <el-table-column prop="price" label="单价" show-overflow-tooltip></el-table-column>
                                <el-table-column prop="number" label="数量" show-overflow-tooltip></el-table-column>
                            </el-table>
                        </div>
                    </div>
                </div>
                <div class="box-card-bottom">
                    <el-button type="primary" size="small" @click="closed(2)">关闭</el-button>
                </div>
            </el-card>
        </div>
        <!-- 上传电子授权书 -->
        <el-dialog title="上传电子授权证书" custom-class="zl-auth-book-dialog" :visible.sync="dialogVisible" width="40%">
            <el-form>
                <el-form-item label="电子授权证书：">
                    <el-upload class="upload-demo" action="https://jsonplaceholder.typicode.com/posts/">
                        <el-button size="small" type="primary" icon="el-icon-upload2">点击上传</el-button>
                        <div slot="tip" class="el-upload__tip">支持扩展名：.pdf .jpg...</div>
                    </el-upload>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer" style="text-align: center;">
                <el-button type="danger" @click="saveBookUpload">确认上传</el-button>
            </div>
        </el-dialog>
    </div>

    <script>
        new Vue({
            el: '#zl-review-business-auth-box-t1',
            data() {
                return {
                    dialogVisible: false,
                    showAuth: false,
                    showDetail: false,
                    disabledAll: false,
                    disabledParams: false,
                    currentType: 2,
                    tableHeader: [
                        { label: '招标项目名称', key: 'zbxmmc', minWidth: '10%', isClick: true },
                        { label: '商机编号', key: 'businessCode', minWidth: '9%' },
                        { label: '商机名称', key: 'businessName', minWidth: '10%' },
                        { label: '商机金额', key: 'number', minWidth: '9%' },
                        { label: '状态', key: 'zt', minWidth: '10%', isEdit: true },
                        { label: '报备状态', key: 'reportStatus', minWidth: '8', slot: true },
                        { label: '被授权单位的名称', key: 'orgname', minWidth: '16%' },
                        { label: '代理商账号', key: 'dlszh', minWidth: '10%' },
                        { label: '代理商名称', key: 'dlsmc', minWidth: '9%' },
                        { label: '代理商等级', key: 'dlsdj', minWidth: '8%' },
                        { label: '申请时间', key: 'sqsj', minWidth: '14%' },
                        { label: '操作', key: 'op', width: '180' }
                    ],
                    tableData: [
                        {
                            zbxmmc: '123456', businessCode: '123456', businessName: 'XXXXX', number: '1000.00', 'zt': '已通过', reportStatus: 1, orgname: '嘉兴逸蓝网络科技有限公司',
                            dlszh: '15037266331', dlsmc: 'Mandy', dlsdj: 'T1', sqsj: '2021-08-18 19:00:00', isEdit: false
                        },
                        {
                            zbxmmc: '123456', businessCode: '123456', businessName: 'XXXXX', number: '1000.00', 'zt': '已通过', reportStatus: 0, orgname: '嘉兴逸蓝网络科技有限公司',
                            dlszh: '15037266331', dlsmc: 'Mandy', dlsdj: 'T1', sqsj: '2021-08-18 19:00:00', isEdit: false
                        },
                        {
                            zbxmmc: '123456', businessCode: '123456', businessName: 'XXXXX', number: '1000.00', 'zt': '已通过', reportStatus: 1, orgname: '嘉兴逸蓝网络科技有限公司',
                            dlszh: '15037266331', dlsmc: 'Mandy', dlsdj: 'T1', sqsj: '2021-08-18 19:00:00', isEdit: false
                        }
                    ],
                    pageData: {
                        currentPage: 1,
                        pageSize: 10,
                        total: 0
                    },
                    selectList: [],
                    authForm: {
                        sqsbh: '',
                        sqlx: 2,
                        bsqdwmc: '',
                        bsqdwbgdz: '',
                        bsqdwlxr: '',
                        bsqdwlxrdh: '',
                        bsqdwlxrcz: '',
                        zbdwmc: '',
                        sxsjmc: '',
                        zbxmmc: '',
                        zbxmbh: '',
                        cpxh: '',
                        sshy: '',
                        sqyxq: '',
                        sqgs: '',
                        sqwcdfs: '',
                        email: '',
                        sjgs: '',
                        sjgslxr: '',
                        sqdw: '',
                        sqr: '',
                        sqrdh: '',
                        sqrq: '',
                        bzzzwj: [],
                        fbzwj: ''
                    },
                    certificateList: [
                        { label: '证书1', value: 1 },
                        { label: '证书2', value: 2 },
                        { label: '证书3', value: 3 },
                        { label: '证书4', value: 4 },
                        { label: '证书5', value: 5 },
                    ],
                    goodsData: [
                        { id: 1, goodsname: 'UPS1', goodsCode: '123456', price: '100', number: 111, isEdit: false },
                        { id: 2, goodsname: 'UPS2', goodsCode: '123456', price: '100', number: 111, isEdit: false },
                    ],
                    detailItemList: [
                        { label: '授权书编号：', key: 'sqsbh' },
                        { label: '授权类型：', key: 'sqlx' },
                        { label: '被授权单位名称：', key: 'bsqdwmc' },
                        { label: '被授权单位的办公地址：', key: 'bsqdwbgdz' },
                        { label: '被授权单位的联系人：', key: 'bsqdwlxr' },
                        { label: '被授权单位的联系人电话：', key: 'bsqdwlxrdh' },
                        { label: '被授权单位的联系人传真：', key: 'bsqdwlxrcz' },
                        { label: '招标单位的名称：', key: 'zbdwmc' },
                        { label: '生效商机名称：', key: 'sxsjmc' },
                        { label: '招标项目名称：', key: 'zbxmmc' },
                        { label: '招标项目的编号：', key: 'zbxmbh' },
                        { label: '产品型号：', key: 'cpxh' },
                        { label: '所属行业（请务必填写）：', key: 'sshy' },
                        { label: '授权有效期：', key: 'sqyxq' },
                        { label: '授权格式：', key: 'sqgs' },
                        { label: '授权书传递方式：', key: 'sqscdfs' },
                        { label: 'Email地址：', key: 'email' },
                        { label: '收件公司：', key: 'sjgs' },
                        { label: '收件公司联系人/电话/地址：', key: 'sjgslxr' },
                        { label: '申请单位：', key: 'sqdw' },
                        { label: '申请人：', key: 'sqr' },
                        { label: '申请人电话：', key: 'sqrdh' },
                        { label: '申请日期：', key: 'sqrq' },
                        { label: '非标资质文件：', key: 'fbzwj' },
                        { label: '标准资质文件：', key: 'bzzzwj' }
                    ]
                }
            },
            methods: {
                selectionChange(selection) {
                    this.selectList = selection;
                },
                // 上传电子授权书
                uploadAuthBook() {
                    this.dialogVisible = true;
                },
                // 确认上传
                saveBookUpload() {
                    this.dialogVisible = false;
                },
                // 批量审核
                batchReview() {
                    console.log('批量审核')
                },
                // 删除
                deleteData() {
                    if (!this.selectList.length) {
                        this.$message.warning('请选择要删除的数据');
                        return;
                    }
                },
                // 刷新
                refresh() {
                    console.log('刷新数据')
                },
                openDetailDialog(data) {
                    this.showDetail = !this.showDetail;
                    this.authForm = {
                        bbzt: data.reportStatus,
                        sqsbh: '2017-SC-E-001',
                        sqlx: 1,
                        bsqdwmc: '嘉兴逸蓝网络科技有限公司',
                        bsqdwbgdz: '浙江省嘉兴市南湖区世界贸易中心2幢902',
                        bsqdwlxr: '张三',
                        bsqdwlxrdh: '15037266331',
                        bsqdwlxrcz: '15037266331',
                        zbdwmc: '',
                        sxsjmc: 'XXXXXXXX项目',
                        zbxmmc: '',
                        zbxmbh: '123456',
                        cpxh: '',
                        sshy: '2',
                        sqyxq: '',
                        sqgs: '',
                        sqwcdfs: '',
                        email: '',
                        sjgs: '',
                        sjgslxr: '',
                        sqdw: '',
                        sqr: '',
                        sqrdh: '',
                        sqrq: '',
                        bzzzwj: [3, 4, 5],
                        fbzwj: ''
                    }
                    console.log(this.authForm, 'authForm')
                },
                // 关闭弹框
                closed(type) {
                    this.showDetail = !this.showDetail
                },
                // 切换每页展示数量
                handleSizeChange(size) {
                    console.log(size)
                },
                // 切换页码
                handleCurrentChange(val) {
                    console.log(`当前页: ${val}`);
                },
                //单元格点击后，显示input，并让input 获取焦点
                handleCellClick(row, column, cell, event) {
                    if (column.label === '状态') {
                        this.$set(row, 'isEdit', true)
                    }
                },
                //input框失去焦点事件
                handleInputBlur({ row, column }, value) {
                    if (column.label === '状态') {
                        this.$set(row, 'isEdit', false)
                        this.$set(row, 'zt', value)
                    }
                },
            }
        })
    </script>
</body>

</html>